<!-- templates/qa.html -->
{% extends "base.html" %}

{% block title %}问答服务{% endblock %}

{% block content %}
<div class="container mt-5">

  <div id="chat-area" class="chat-area mb-3 p-3" style="overflow-y: auto; background-color: #e9ecef; border-radius: 5px;">
    <!-- 对话内容将在这里显示 -->
  </div>
   <div class="input-group mb-3">
    <input type="text" id="knowledge-base-input" class="form-control" placeholder="输入知识库名称...">
  </div>
  <div class="input-group">
    <input type="text" id="user-input" class="form-control" placeholder="请输入你的问题...">
    <div class="input-group-append">
      <button id="send-btn" class="btn btn-primary">发送</button>
    </div>
  </div>
</div>

<!-- 在您的 HTML 文件中，添加一个加载动画的元素 -->
<div id="loading" class="loading" style="display: none;">
  <div class="spinner-border text-primary" role="status">
    <span class="sr-only">加载中...</span>
  </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="alertModalLabel">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 这里放置提示信息 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/showdown.min.js"></script>
<script>
  const chatArea = document.getElementById('chat-area');
  const userInput = document.getElementById('user-input');
  const sendBtn = document.getElementById('send-btn');
  let currentUsername;

  // 显示模态框的函数
  function showAlertModal(message) {
    const modalBody = document.querySelector('#alertModal .modal-body');
    modalBody.textContent = message; // 设置提示信息文本
    $('#alertModal').modal('show'); // 使用 jQuery 显示模态框
  }
  // 显示或隐藏加载动画的函数
  function setLoading(loading) {
    document.getElementById('loading').style.display = loading ? 'block' : 'none';
  }
  sendBtn.addEventListener('click', function() {
    const content = userInput.value.trim();
    const knowledgeBaseName = document.getElementById('knowledge-base-input').value.trim();
    if (!content) {
      showAlertModal("请输入你的问题。");
      return;
    }
    if (!knowledgeBaseName) {
      showAlertModal("请输入知识库名称。");
      return;
    }
     // 显示加载动画
    setLoading(true);

    userInput.value = '';
    userInput.disabled = true;
    sendBtn.disabled = true;
    fetch('/qa', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ message: content, knowledge_base_name: knowledgeBaseName }),
    })
    .then(response => response.json())
    .then(data => {
      // 使用从后端返回的用户名
      currentUsername = data.user;
      addMessageToChat('USER', content, currentUsername);
      addMessageToChat('ASSISTANT', data.answer, currentUsername);
    })
    .catch(error => {
      console.error('Error during chat:', error);
    })
    .finally(() => {
      // 隐藏加载动画
      setLoading(false);
      userInput.disabled = false;
      sendBtn.disabled = false;
      userInput.focus();
    });

  });

// 创建 Showdown 的 Markdown 转换器
const converter = new showdown.Converter();

function addMessageToChat(sender, message, username) {
  // 使用 Showdown 将 Markdown 转换为 HTML
  const htmlContent = converter.makeHtml(message);

  // 创建消息的包装器
  const messageWrapper = document.createElement('div');
  messageWrapper.classList.add('message-wrapper');

  // 创建发送者标签
  const messageSender = document.createElement('div');
  messageSender.classList.add('message-sender');
  messageSender.textContent = sender === 'USER' ? username : '助手'; // 根据发送者显示用户名或'助手'

  // 创建消息内容
  const messageContent = document.createElement('div');
  messageContent.classList.add('message-content');
  messageContent.innerHTML = htmlContent;

  // 根据消息发送者，应用不同的样式
  if (sender === 'USER') {
    messageWrapper.classList.add('user');
    messageSender.textContent = username; // 使用当前登录用户的用户名
    messageSender.style.textAlign = 'right'; // 用户的消息发送者标签靠右
    messageContent.classList.add('user'); // 应用用户消息的样式
  } else {
    messageWrapper.classList.add('assistant');
    messageSender.textContent = '助手'; // 助手名称
    messageSender.style.textAlign = 'left'; // 助手的消息发送者标签靠左
    messageContent.classList.add('assistant'); // 应用助手消息的样式
  }

  // 将发送者标签和消息内容添加到消息包装器
  messageWrapper.appendChild(messageSender);
  messageWrapper.appendChild(messageContent);

  // 将消息包装器添加到聊天区域
  const chatArea = document.getElementById('chat-area');
  chatArea.appendChild(messageWrapper);

  // 滚动到最新的消息
  chatArea.scrollTop = chatArea.scrollHeight;
}

</script>
{% endblock %}
